<template>
  <div class="station-overview">
    <el-row :gutter="20">
      <!-- 基本信息卡片 -->
      <el-col :span="12">
        <el-card class="info-card">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.basicInfo') }}</span>
            </div>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item :label="$t('deviceDetail.stationName')">
              储能电站01
            </el-descriptions-item>
            <el-descriptions-item :label="$t('deviceDetail.stationCode')">
              EMS-001
            </el-descriptions-item>
            <el-descriptions-item :label="$t('deviceDetail.location')">
              江苏省南京市
            </el-descriptions-item>
            <el-descriptions-item :label="$t('deviceDetail.capacity')">
              2.5MWh
            </el-descriptions-item>
            <el-descriptions-item :label="$t('deviceDetail.power')">
              1MW
            </el-descriptions-item>
            <el-descriptions-item :label="$t('deviceDetail.status')">
              <el-tag type="success">{{ $t('deviceDetail.running') }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <!-- 实时运行数据 -->
      <el-col :span="12">
        <el-card class="data-card">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.realTimeData') }}</span>
            </div>
          </template>
          <el-row :gutter="16">
            <el-col :span="8">
              <div class="data-item">
                <div class="data-label">{{ $t('deviceDetail.totalPower') }}</div>
                <div class="data-value">850kW</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="data-item">
                <div class="data-label">{{ $t('deviceDetail.soc') }}</div>
                <div class="data-value">75%</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="data-item">
                <div class="data-label">{{ $t('deviceDetail.soH') }}</div>
                <div class="data-value">95%</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="16" style="margin-top: 20px;">
            <el-col :span="8">
              <div class="data-item">
                <div class="data-label">{{ $t('deviceDetail.todayCharging') }}</div>
                <div class="data-value">1,250kWh</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="data-item">
                <div class="data-label">{{ $t('deviceDetail.todayDischarging') }}</div>
                <div class="data-value">1,180kWh</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="data-item">
                <div class="data-label">{{ $t('deviceDetail.efficiency') }}</div>
                <div class="data-value">94.4%</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 运行趋势图表 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.powerTrend') }}</span>
            </div>
          </template>
          <div class="chart-container">
            <div class="chart-placeholder">
              <i class="el-icon-data-line"></i>
              <p>{{ $t('deviceDetail.chartPlaceholder') }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 告警信息 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card class="alarm-card">
          <template #header>
            <div class="card-header">
              <span>{{ $t('deviceDetail.alarms') }}</span>
              <el-button type="primary" link>{{ $t('common.more') }}</el-button>
            </div>
          </template>
          <el-table :data="alarmData" style="width: 100%">
            <el-table-column prop="time" :label="$t('deviceDetail.alarmTime')" width="180" />
            <el-table-column prop="level" :label="$t('deviceDetail.alarmLevel')" width="100">
              <template #default="{ row }">
                <el-tag :type="getAlarmType(row.level)" size="small">{{ row.level }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="content" :label="$t('deviceDetail.alarmContent')" />
            <el-table-column prop="status" :label="$t('deviceDetail.alarmStatus')" width="100">
              <template #default="{ row }">
                <el-tag :type="row.status === '已处理' ? 'success' : 'warning'" size="small">{{ row.status }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const alarmData = ref([
  {
    time: '2024-01-15 14:30:25',
    level: '一般',
    content: 'PCS模块温度偏高',
    status: '已处理'
  },
  {
    time: '2024-01-15 12:15:10',
    level: '重要',
    content: 'BMS单体电压异常',
    status: '处理中'
  },
  {
    time: '2024-01-15 09:45:33',
    level: '一般',
    content: '环境温度传感器故障',
    status: '已处理'
  }
])

const getAlarmType = (level) => {
  switch (level) {
    case '紧急': return 'danger'
    case '重要': return 'warning'
    case '一般': return 'info'
    default: return 'info'
  }
}
</script>

<style scoped>
.station-overview {
  height: 100%;
  overflow-y: auto;
}

.info-card, .data-card, .chart-card, .alarm-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}

.data-item {
  text-align: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 6px;
}

.data-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.data-value {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  border-radius: 6px;
}

.chart-placeholder {
  text-align: center;
  color: #909399;
}

.chart-placeholder i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.chart-placeholder p {
  margin: 0;
  font-size: 16px;
}
</style>